<template>
  <div class="my_inf">
    <div class="inf_left">
      <div class="inf_photo">
        <img src="../../assets/img/logo.png" alt="" />
        <span>{{ myMes.a_name }}</span>
      </div>
      <ul class="clear">
        <li>
          部门：<span>{{ myMes.a_department }}</span>
        </li>
        <li>
          工号：<span>{{ myMes.a_schoolId }}</span>
        </li>
        <li>
          地址：<span>{{ myMes.a_site }}</span>
        </li>
        <li>
          电话：<span>{{ myMes.a_phone }}</span>
        </li>
        <li>
          邮箱：<span>{{ myMes.a_eMail }}</span>
        </li>
      </ul>
      <div class="inf_btn">
        <el-button size="small" type="primary" @click="openamendInf()" round
          >修改信息</el-button
        >
        <el-button size="small" type="success" @click="end()" round
          >退出登录</el-button
        >
      </div>
    </div>
    <div class="inf_right">
      <div class="write_word">
        <span>写通知</span>
        <input type="text" v-model="wLeaveWord" /><el-button
          type="primary"
          @click="writeSystemInf"
          >提交</el-button
        >
      </div>
      <ul class="mes_list">
        <li v-for="list in systemMes" :key="list.w_id">
          <div class="mes_photo">
            <img src="../../assets/img/logo.png" alt="" />
            <span>系统通知</span>
          </div>
          <div class="mes_main">
            <p class="comment_me">
              {{ list.system_inf }}
            </p>
            <div>时间：{{ list.time }}</div>
          </div>
        </li>
      </ul>
    </div>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <ul class="tc_mes">
        <li>电话：<input type="text" v-model="myMes.a_phone" /></li>
        <li>邮件：<input type="text" v-model="myMes.a_eMail" /></li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelamendInf">取 消</el-button>
        <el-button type="primary" @click="amendInf">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      a_id: "",
      myMes: {},
      systemMes: [],
      dialogFormVisible: false,
      wLeaveWord: "",
    };
  },
  mounted() {
    var token = localStorage.getItem("token");
    this.a_id = token.substring(1, token.length - 1).split("#")[1] * 1;
    this.getMytData();
  },
  methods: {
    getMytData() {
      axios
        .post(`http://localhost:3000/getAdmMes`, {
          a_id: this.a_id,
        })
        .then((ret) => {
          this.systemMes = ret.data.systemMes;
          this.myMes = ret.data.mes;
        });
    },
    cancelamendInf() {
      this.dialogFormVisible = false;
    },
    openamendInf() {
      this.dialogFormVisible = true;
    },
    // 修改信息
    amendInf() {
      axios
        .post(`http://localhost:3000/updateExpert`, {
          expertData: this.myMes,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
            this.cancelamendInf();
          }
        });
    },
    writeSystemInf() {
      if (this.wLeaveWord == "") {
        this.$message({
          showClose: true,
          message: "不能发布空消息哦~~",
          type: "error",
        });
      } else {
        console.log(1);
        var time = new Date().toLocaleString();
        axios
          .post(`http://localhost:3000/writeSystemInf`, {
            system_inf: this.wLeaveWord,
            time,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "发布成功",
                type: "success",
              });
            }
          });
      }
    },
    end() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.my_inf {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px;
}
.inf_left {
  width: 300px;
  height: 700px;
  position: sticky;
  top: 10px;
  padding: 0px 10px;
}
.inf_left,
.inf_right > div {
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.inf_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  font-size: 18px;
  font-weight: 700;
  color: #303133;
}
.inf_photo > img {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #ddd;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.inf_left > ul {
  border-top: 2px solid #606266;
  margin-bottom: 200px;
}
.inf_left > ul > li {
  font-size: 16px;
  color: #606266;
  margin: 20px 10px;
}
.inf_btn {
  margin: 20px 10px;
}
.inf_right {
  width: 70%;
}
.write_word {
  margin: 10px 0;
}
.write_word span {
  font-size: 18px;
  margin-right: 20px;
}
.write_word input {
  width: 600px;
  height: 38px;
  color: #606266;
  font: 18px/38px "";
  padding-left: 10px;
  margin-right: 20px;
  border: 1px solid #409eff;
  border-radius: 5px;
}
.mes_list {
  height: 91%;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px 20px;
  background-color: #fff;
}
.mes_list > li {
  display: flex;
  margin: 30px 0;
  justify-content: left;
}
.awards_list {
  display: flex;
  flex-wrap: wrap;
}
.awards_list li {
  width: 35%;
  margin: 20px;
  padding: 10px;
  color: white;
  background-color: #409eff;
  border-radius: 20px;
}
.team_card {
  border-radius: 10px;
  padding: 20px;
  margin: 10px;
  color: white;
  background-color: #409eff;
}
.team_card img {
  background-color: #fff;
}
.team_card > h4 {
  height: 24px;
  font-weight: 700;
  font: 18px/24px "";
}
.team_card > div {
  margin-top: 5px;
  height: 60px;
  display: flex;
  align-items: center;
}
.team_card > div > span {
  font-size: 18px;
  display: inline-block;
}
.team_card > div > div {
  display: inline-block;
  margin: 0 20px;
}
.delbtn {
  display: inline-block;
  width: 270px;
}
.downBtn {
  margin: 10px;
  float: right;
}
.projectBox {
  display: flex;
  width: 100%;
  margin: 10px auto;
}
.tc_mes {
  width: 80%;
  margin-left: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tc_mes > li {
  width: 33%;
  font-size: 14px;
  color: #606266;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
}
</style>
